<!--
* @author wn
* @date 2022/09/26 16:17:35
* @description: 订单详情页  订单信息组件
!-->
<template>
	<div class="detail-info" v-if="order">
		<!-- 商品信息 -->
		<h3>订单商品</h3>
		<table>
			<thead>
				<tr>
					<th width="400">商品信息</th>
					<th>单价</th>
					<th>数量</th>
					<th>小计</th>
					<th>实付</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="good in order.skus" :key="good.id">
					<td>
						<a href="javascript:;" class="good">
							<img v-lazy="good.image" alt="" />
							<div>
								<p class="ellipsis">{{ good.name }}</p>
								<p class="ellipsis">{{ good.attrsText }}</p>
							</div>
						</a>
					</td>
					<td>
						<p>&yen;{{ good.curPrice }}</p>
					</td>
					<td>{{ good.quantity }}</td>
					<td>
						<p>&yen;{{ good.curPrice * good.quantity }}</p>
					</td>
					<td>
						<p>&yen;{{ good.realPay }}</p>
					</td>
				</tr>
			</tbody>
		</table>
		<!-- 收货信息 -->
		<h3>收货信息</h3>
		<div class="info-box">
			<dl>
				<dt>收<i></i>货<i></i>人：</dt>
				<dd>{{ order.receiverContact }}</dd>
			</dl>
			<dl>
				<dt>联系方式：</dt>
				<dd>
					{{
						order.receiverMobile.replace(/^(.{3})(?:\d+)(.{4})$/, '$1****$2')
					}}
				</dd>
			</dl>
			<dl>
				<dt>收货地址：</dt>
				<dd>{{ order.receiverAddress }}</dd>
			</dl>
		</div>
		<!-- 支付方式及送货时间 -->
		<h3>支付方式及送货时间</h3>
		<div class="info-box">
			<dl>
				<dt>支付方式：</dt>
				<dd>{{ order.payChannel === 1 ? '支付宝' : '微信' }}</dd>
			</dl>
			<dl>
				<dt>送货时间：</dt>
				<dd v-if="order.deliveryTimeType === 1">不限送货时间：周一至周日</dd>
				<dd v-if="order.deliveryTimeType === 2">
					工作日送货：周一至周五(适合于公司)
				</dd>
				<dd v-if="order.deliveryTimeType === 3">
					双休日、假日送货(适合于家庭地址)
				</dd>
			</dl>
		</div>
		<!-- 发票信息 -->
		<h3>发票信息</h3>
		<div class="info-box">
			<dl>
				<dt>发票类型：</dt>
				<dd>电子发票</dd>
			</dl>
			<dl>
				<dt>发票内容：</dt>
				<dd>日用品</dd>
			</dl>
			<dl>
				<dt>发票抬头：</dt>
				<dd>个人</dd>
			</dl>
		</div>
		<!-- 订单信息 -->
		<h3>订单信息</h3>
		<div class="info-box">
			<dl>
				<dt>订单编号：</dt>
				<dd>在线支付</dd>
			</dl>
			<dl>
				<dt>下单时间：</dt>
				<dd>{{ order.createTime }}</dd>
			</dl>
		</div>
		<!-- 汇总信息 -->
		<div class="sum-info">
			<div class="item">
				<label>商品件数：</label>
				<span>{{ order.totalNum }}件</span>
			</div>
			<div class="item">
				<label>商品总价：</label>
				<span>¥{{ order.totalMoney }}</span>
			</div>
			<div class="item">
				<label>运<i></i>费：</label>
				<span>{{ order.postFee }}</span>
			</div>
			<div class="item">
				<label>应付总额：</label>
				<span class="price">¥{{ order.payMoney }}</span>
			</div>
		</div>
	</div>
</template>
<script>
export default {
	name: 'DetailInfo',
	props: {
		order: {
			type: Object,
			default: () => ({}),
		},
	},
}
</script>
<style scoped lang="less">
.detail-info {
	padding: 0 50px;
	h3 {
		font-weight: 500;
		font-size: 16px;
		padding: 25px 5px;
	}
	// 商品信息
	table {
		width: 100%;
		// 设置相邻单元格的边框间的距离
		border-spacing: 0;
		// 相邻边被合并
		border-collapse: collapse;
		line-height: 24px;
		th,
		td {
			padding: 20px;
			text-align: center;
			border-bottom: 1px solid #f5f5f5;
			&:first-child {
				border-left: 1px solid #f5f5f5;
			}
			&:last-child {
				border-right: 1px solid #f5f5f5;
			}
		}
		th {
			font-weight: normal;
			background-color: #f5f5f5;
			&:first-child {
				text-align: left;
			}
		}
		.good {
			display: flex;
			align-items: center;
			text-align: left;
			img {
				width: 70px;
				height: 70px;
				border: 1px solid #f5f5f5;
			}
			> div {
				width: 270px;
				margin-left: 20px;
				& P:last-child {
					color: #999;
				}
			}
		}
	}
	// 收货信息
	.info-box {
		border: 1px solid #f5f5f5;
		padding: 20px;
		dl {
			display: flex;
			line-height: 30px;
			dt {
				width: 80px;
				color: #999;
			}
			i {
				display: inline-block;
				width: 0.5em;
			}
		}
	}
	.sum-info {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		padding: 30px 30px 100px;
		.item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 250px;
			height: 40px;
			font-size: 16px;
			i {
				display: inline-block;
				width: 2em;
			}
			> span {
				padding-right: 30px;
				&.price {
					font-size: 20px;
					color: @priceColor;
				}
			}
		}
	}
}
</style>
